<template>
  <div class="cate-container">
    <div class="cate-sreach">
      <van-search
        v-model="value"
        shape="round"
        background="#fe3c35"
        placeholder="输入商品名或粘贴宝贝标题搜索"
        left-icon=""
      />
    </div>
    <div class="cate-body">
      <div class="body-content">
        <van-tree-select
          v-model:main-active-index="activeIndex"
          height="100%"
          :items="cates"
        >
          <template #content>
            <div class="cate-content">
              <div v-if="cates.length">
                <div
                  class="cate-floors"
                  v-for="(v, i) in cates[activeIndex].floors"
                  :key="i"
                >
                  <div class="floors-name">{{ v.name }}</div>

                  <van-grid :column-num="3" :border="false" icon-size="40">
                    <van-grid-item
                      v-for="e in v.list"
                      :key="e.api_cid"
                      :icon="e.img"
                      :text="e.name"
                      :to="{
                        name: 'catelist',
                        params: {
                          cid: e.api_cid,
                        },
                        query: {
                          r: 'class/cyajaxsub',
                          title: e.name,
                        },
                      }"
                    />
                  </van-grid>
                </div>
              </div>
            </div>
          </template>
        </van-tree-select>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const activeIndex = ref(0);
    const store = useStore();
    const value = ref("");
    const active = ref(0);
    const cates = computed(() => store.state.cate.cates);
    onMounted(() => {
      store.dispatch({
        type: "cate/getCate",
      });
    });
    return {
      activeIndex,
      items: [{ text: "分组 1" }, { text: "分组 2" }],
      cates,
      value,
      active,
    };
  },
});
</script>
<style lang="stylus" scoped>
html, body, #app {
  height: 100%;
  width: 100%;
}

.cate-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cate-body {
  position: absolute;
  top: 0.44rem;
  right: 0;
  left: 0;
}

.floors-name {
  margin-left: 0.04rem;
  padding: 10px 6px;
  color: #333;
}

.cate-sreach {
  height: 0.44rem;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 60;

  /deep/ .van-search__content {
    border-radius: 5px;
    padding-left: 34px;
  }

  .van-search {
    height: 0.44rem;
    background-color: #ff1f4c;
    padding: 2px 14px 0px 44px;
    width: 100%;
  }

  /deep/ .van-cell {
    flex: 1;
    padding: 2px 0px;
  }
}

.cate-body {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;

  /deep/ .van-grid-item__content {
    padding: 0 20px;
  }
}

.body-content {
  height: 100%;
}

.cate-footer {
  width: 100%;
  height: 0.49rem;
  padding-top: 0.02rem;
}

/deep/.van-tree-select__nav {
  flex: 0.6;
}

.van-search {
  padding: 5px 12px;
  width: 100%;
}

/deep/.van-sidebar-item--select::before {
  height: 0.48rem;
  width: 0.02rem;
}
</style>
